<script setup>
import { ref } from 'vue';

import { useRouter } from 'vue-router'

// 使用 useRouter 创建一个 router 实例
const router = useRouter()
import { areaList } from '@vant/area-data';

// 返回
const onClickLeft = () => history.back();
// 评价
const value = ref(5)
// 配送
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
const changaddress = (e) => {

    address1.value = e.selectedOptions[0].text + e.selectedOptions[1].text + e.selectedOptions[2].text
    console.log(address1.value);
    show.value = false;

}
const changaddress1 = () => {

    show.value = false;

}
// 绑定收货列表
const address1 = ref('')
</script>
<template>
    <div class="details">
        <!-- 导航 -->
        <van-nav-bar background="#000" title="商品详情" left-arrow @click-left="onClickLeft" />
        <!-- 图片 -->
        <div class="photo">
            <img src="/public/recomment-banner.png" alt="">
        </div>
        <div class="all">
            <div class="one">
                <div>￥390</div>
                <div>￥390</div>
                <div>促销价</div>
            </div>
            <div class="two" style="color: #d5d5d5;">已售683件</div>
        </div>
        <div class="flower1">心中洛神
        </div>
        <div class="flower2">洛神玫瑰33枝 <div class="flower3">花如其名
                心中永远的神</div>
        </div>
        <!-- 分割 -->
        <div class="segmentation">
            <div class="box1">
                <div class="address">
                    <div>已选</div>
                    <input style=" padding: 5px; border-bottom: 1px solid #eeeeee;" type="text" placeholder="心中洛神">
                    <van-icon size="15px" name="arrow" />
                </div>
                <div class="address">
                    <div>送至</div>
                    <input type="text" placeholder="请选择配送区域">
                    <van-icon size="15px" name="arrow" />
                </div>
            </div>
            <div class="box1">
                <div class="address">
                    <div>花语</div>
                    <input type="text" placeholder="一眼足以定终身，我心佳人比洛神">
                    <van-icon size="15px" name="arrow" />
                </div>
                <div class="address">
                    <div>材料</div>
                    <input type="text" placeholder="洛神玫瑰33枝">
                    <van-icon size="15px" name="arrow" />
                </div>
                <div class="address">
                    <div>配送</div>
                    <div class="flag">
                        <img src="/public/address.png" alt="">
                        <input type="text" placeholder="“精品鲜花”免费配送" v-model="address1">
                    </div>

                    <van-icon size="15px" name="arrow" @click="showPopup" />
                </div>
            </div>
            <div class="box2">
                <div class="address">
                    <div>晒单与评价</div>
                    <div style="color: #c5c5c5;">有56条评价 <van-icon size="15px" name="arrow" /></div>
                </div>
                <div class="evaluation" v-for="item in 2">
                    <div class="user">
                        <div class="user-left">
                            <img src="/public/recomment-tx1.png" alt=""> 王*丽
                        </div>
                        <div class="user-right">
                            <van-rate v-model="value" color="#ff6600" />
                        </div>
                    </div>
                    <div class="review">
                        <div class="top">真的很棒，从鲜花到配送没得挑，以后还会买的!</div>
                        <div class="center">
                            <img v-for="item in 3" src="/public/recomment-evaluate.png" alt="">
                        </div>
                        <div class="right">
                            <img src="/public/address.png" alt="">
                            广东佛山市顺德区
                        </div>
                    </div>
                </div>
                <!-- 全部评价 -->
                <div class="seeall">
                    查看全部评价
                </div>
            </div>
            <!-- 商品详情 -->
            <div class="box3">
                <div></div>
                <div>商品详情</div>
                <div></div>
            </div>
            <!-- 弹出层 -->
            <van-popup v-model:show="show" round position="bottom" :style="{ padding: '10px' }">
                <van-area @cancel="changaddress1" @confirm="changaddress" title="标题"
                    :area-list="areaList" :columns-placeholder="['省份', '城市', '区县']" /></van-popup>
        </div>
        <!-- 底部 -->
        <div class="bottom">
            <div class="bottom-one">编号 <div>9012546</div>
            </div>
            <div class="bottom-one">类别 <div>鲜花</div>
            </div>
            <div class="bottom-one1">
                包装
                <div class="special">白色小号英文插画纸6张、自色雪梨纸2张、粉色罗纹烫金丝带2米</div>
            </div>
            <div class="bottom-one">附送 <div>下单填写留言，即免费赠送精美贺卡!</div>
            </div>
            <!-- 图片 -->
            <div class="photo">
                <img src="/public/recomment-img.png" alt="">
            </div>
            <div class="center1">心中洛神</div>
            <div class="center1">一眼足以定终身，我心佳人比洛神</div>
        </div>
    </div>
</template>

<style lang="scss">
.details {
    box-sizing: border-box;

    /*导航 */
    .van-nav-bar__content {
        position: relative;

        /* 透明度为50% */
        .van-badge__wrapper {
            font-size: 18px;
            top: 20px;
            position: absolute;
            color: #9f9f9f;
        }

        .van-nav-bar__title {
            font-size: 18px;
            left: 41%;
            top: 20px;
            position: absolute;
            color: #000;
        }
    }

    /*图片 */
    .photo {
        width: 100%;

        img {
            width: 100%;
        }
    }

    .all {
        width: 96%;
        margin: auto;
        box-sizing: border-box;
        padding: 5px;
        display: flex;
        justify-content: space-between;

        .one {
            width: 78%;
            display: flex;
            justify-content: left;
            align-items: center;

            div:nth-child(1) {
                width: 17%;
                font-size: 20px;
                font-weight: bold;
                text-align: left;
                color: #f84c55;
            }

            div:nth-child(2) {
                margin-left: 10px;
                width: 15%;
                text-decoration: line-through;
                color: #a3a3a3;
            }

            div:nth-child(3) {
                margin-left: 5px;
                width: 15%;
                text-align: center;
                font-size: 12px;
                background-color: #ff5959;
                color: #fff;
            }
        }
    }

    .flower1 {
        width: 96%;
        margin: auto;
        font-weight: bold;
        padding: 5px;
        font-size: 20px;
    }

    .flower2 {
        width: 96%;
        margin: auto;
        padding-left: 5px;
        display: flex;

        .flower3 {
            color: #ffd3ae;
            margin-left: 5px;
            margin-bottom: 10px;
        }
    }

    /*分割 */
    .segmentation {
        border: 1px solid #f6f6f6;
        background-color: #f6f6f6;

        .box1 {
            width: 94%;
            margin: auto;
            margin-top: 10px;
            background-color: #fff;
            border-radius: 10px;

            .address {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px;

                input {
                    border: none;
                    background-color: #fff;
                }

                .flag {
                    width: 60%;
                    align-items: center;
                    display: flex;

                    img {
                        width: 20px;
                        height: 20px;
                    }
                }
            }
        }

        .box2 {
            width: 94%;
            margin: auto;
            margin-top: 10px;
            background-color: #fff;
            border-radius: 10px;

            .address {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px;
            }

            .evaluation {
                margin-top: 10px;

                .user {
                    padding: 5px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .user-left {
                        display: flex;
                        align-items: center;

                        img {
                            margin-right: 10px;
                            width: 40px;
                            height: 40px;
                        }
                    }
                }

                .review {
                    padding: 5px;
                    display: flex;
                    flex-wrap: wrap;

                    .top {
                        width: 100%;
                    }

                    .center {
                        width: 100%;
                        margin-top: 10px;

                        img {
                            margin-right: 10px;
                            width: 30%;
                        }
                    }

                    .right {
                        margin-top: 10px;
                        display: flex;
                        align-items: center;
                        width: 100%;
                        color: #d8d8d8;

                        img {

                            width: 20px;
                            height: 20px;
                        }
                    }
                }
            }

            .seeall {
                text-align: center;
                height: 40px;
                line-height: 40px;
            }

        }

        .box3 {
            width: 70%;
            margin: auto;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;

            div:nth-child(1) {
                width: 25%;
                height: 0px;
                margin-top: 10px;
                border: 1px solid #aeaeae;
            }

            div:nth-child(2) {
                text-align: center;
                width: 30%;
                color: #c4c4c4;
            }

            div:nth-child(3) {
                width: 25%;
                height: 0px;
                margin-top: 10px;
                border: 1px solid #aeaeae;
            }
        }
    }

    //底部
    .bottom {
        background-color: #fff;
        border-radius: 15px;
        border: 1px solid #fff;
        box-sizing: border-box;
        padding-bottom: 15px;
        .bottom-one1 {
                width: 90%;
                margin: auto;
                margin-top: -15px;
                display: flex;
                padding: 10px;
                color: #989da0;
                align-items: center;
        
                .special {
                    padding-top: 18px;
                    width: 85%;
                    color: #000;
                    margin-left: 15px;
                }
        
                div {
                    width: 85%;
                    color: #000;
                    margin-left: 15px;
                }
            }
        .bottom-one {
            width: 90%;
            margin: auto;
            display: flex;
            padding: 10px;
            color: #989da0;
            align-items: center;
            .special {
                padding-top: 15px;
                width: 85%;
                color: #000;
                margin-left: 15px;
            }

            div {
                width: 85%;
                color: #000;
                margin-left: 15px;
            }
        }

        .center1 {
            margin-top: 5px;
            box-sizing: border-box;
            text-align: center;
            margin-bottom: 10px;
        }
    }
}
</style>
